<template>
	<div class="Userleft">
		<div class="edit-user">
			<i class="iconfont edit-user-icon iconbianji"></i>
			<div class="text">点击编辑个人资料</div>
		</div>
		<div class="userheader">
			<img src="../../../build/logo.png" />
		</div>
		<div class="username">
			{{userInfo.name}}
		</div>
		<!--所属-->
		<div class="other" v-if="showtype === -1">
			部门：{{userInfo.deptName}}
		</div>
		<div class="other" v-if="showtype === -1">
			职称：{{userInfo.levelName}}
		</div>
		<div class="other" v-if="showtype === -1">
			联系：{{userInfo.mobile}}
		</div>
		<div class="desc"  v-if="showtype === -1">
			{{userInfo.desc}}
		</div>
		<div class="btn"  v-if="showtype === -1">
			<div class="bline"></div>
			<el-button type="info" @click="outloginClick">退出登录</el-button>
		</div>
		<!--组织权限-->
		<div class="fromp" v-if="showtype === 1">
			<div class="form-cell" 
				v-for="(item,index) in from1data" 
				@click="fromClick(item)"
				:class="fromflag===item.id?'lactive':''">
				{{item.name}}
			</div>
			<div class="form-cell"></div>
		</div>
	</div>
</template>

<script>
import Bus from '@/common/config/bus'
import {outlogin} from '@/service/login'
export default {
  name: 'UserLeft',
  props:{
//	showtype:{
//		type:Number,
//		default:1
//	},
//	fromdata:{
//		type:Array
//	},
	top:{
		type:Number,
		default:40
	},
	bgcolor:{
		type:String,
		default:"rgba(255 ,30, 67,0.9)"
	}
 },
  data () {
    return {
      from1data:[],
      fromflag:0,
      showtype:-1,
      uaerInfo:{},
    }
  },
  created(){
  	const that = this
  	Bus.$on('menu',function(data){
  		console.log(data)
  		that.from1data = data
  		if(that.from1data != null){
  			that.showtype = 1
  		}else{
  			that.showtype = -1
  		}
  	})
  	Bus.$on('nomenu',function(data){
  		console.log(data)
  		that.showtype = data
  	})
  	this.userInfo = JSON.parse(localStorage.getItem('userdata'))
  },
  methods:{
  	//退出
  	outloginClick(){
  		this.outloginload()
  	},
  	fromClick(it){
  		this.fromflag = it.id
  	},
  	outloginload(){
  		const that = this
		const loading = this.$loading({
	          lock: true,
	          text: 'Loading',
	          spinner: 'el-icon-loading',
	          background: 'rgba(0, 0, 0, 0.7)'
	       });
		outlogin().then(res =>{
			console.log(res)
			if(res.data.code === 0){
				loading.close();
				that.$notify({
		          title: '成功',
		          message: '退出登录成功',
		          type: 'success'
		        });
			}else{
				that.$notify({
		          title: '警告',
		          message: '服务器出错了',
		          type: 'warning'
		        });
			}
		})
		.catch(res => {
        	that.$message.error(res);
      	});
  	},
  }
}
</script>

<style scoped>
	.Userleft{
		position: absolute;
		left: 0;
		top: 50px;
		bottom: 0;
		height: calc(100%-70);
		width: 200px;
		color: white;
		background-color: #242529;
		align-items: center;
	}
	.edit-user{
		margin-top: 15px;
		width: 100%;
		font-size: 14px;
		color: #E8E8E7;
	}
	.edit-user-icon{
		display: inline-block;
		font-size: 22px;
	}
	.text{
		display: inline-block;
	}
	/*头像*/
	.userheader{
		margin-top: 20px;
		width: 120px;
		height: 120px;
		display: inline-flex;
		border: 2px solid #FFFFFF;
		border-radius: 100%;
		overflow: hidden;
	}
	.userheader img{
		width: 100%;
	}
	.username{
		margin-top: 20px;
		font-family: "微软雅黑";
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 5px;
	}
	/*所属*/
	.other{
		color: #E8E8E7;
		font-family: "微软雅黑";
		font-size: 14px;
		margin-top: 10px;
		margin-bottom: 15px;
	}
	.desc{
		width: 86%;
		margin: 0 7%;
		font-size: 12px;
		color: #E8E8E7;
		padding-bottom: 25px;
		line-height: 20px;
		letter-spacing: 4px;
		border-bottom: 2px solid #aaaaaa;
	}
	.btn{
		margin-top: 20px;
	}
	/*组织权限*/
	.fromp{
		margin-top: 20px;
		width: 100%;
		display: flex;
		flex-flow: column;
		font-family: "微软雅黑";
		font-size: 20px;
	}
	.form-cell{
		line-height: 50px;
	}
	.lactive{
		background-color: #4285F4;
	}
</style>